@extends('common.admin_template')

@section('content')
    <div class="boxWidth">
        <h3>编辑表单模版</h3>
        @include('common.notice_msg')
        <form method="post" action="{{url('admin/formitem/save')}}">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" name="FormItem[id]" value="{{$FormItem->id}}">
        <div class="row editFormItem">
            <div class="col-xs-3"><span>表单名称</span></div>
            <div class="col-xs-8" id="formNameBox"><input type="text" class="form-control" id="formName" name="FormItem[name]" value="{{$FormItem->name}}"><div class="addInputNotice">请输入表单模版名称</div></div>
        </div>
        <div class="row editFormItem">
            <div class="col-xs-3"><span>表单项目</span>
                <div class="f_r dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        添加
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li id="addTitle"><a href="#">分段标题</a></li>
                        <li id="addText"><a href="#">文本</a></li>
                        <li id="addArea"><a href="#">文本框</a></li>
                        <li id="addTime"><a href="#">日期</a></li>
                        <li id="addMin"><a href="#">时间</a></li>
                        <li id="addSelect"><a href="#">选项</a></li>
                        <li id="addPhone"><a href="#">手机验证</a></li>
                    </ul>
                </div>
                <div class="f_r dropdown" id="delInput">
                    <button class="btn btn-default dropdown-toggle" type="button">
                        删除
                    </button>
                </div></div>
            <div class="col-xs-8">
                <div id="formArr">
                    <div class="row">
                        <div class="col-xs-2">类型</div>
                        <div class="col-xs-4">名称</div>
                        <div class="col-xs-6">简介 / 值</div>
                    </div>
                @foreach($FormItem->value as  $key => $value)
                    <div class="row">
                        <div class="col-xs-2">{{$value->typeName}}<input type="text" style="display: none" name="FormItem[item_{{$key}}_t]" value="{{$value->type}}"></div>
                        <div class="col-xs-4"><div id="FormItem_{{$key}}_box"><input placeholder="请输入名称" type="text" id="FormItem_{{$key}}" class="form-control" name="FormItem[item_{{$key}}]" value="{{$value->name}}"></div></div>
                        <div class="col-xs-6"><input type="text" style="{{$value->type=='time'||$value->type=='min'||$value->type=='title'?'display: none':''}}" placeholder="请输入默认提示信息" class="form-control" name="FormItem[item_{{$key}}_p]" value="{{$value->placeholder}}"></div>
                    </div>
                @endforeach
                </div>
                <div class="addInputNotice">请输入表单项目名，可点击"删除"或"添加"改变项目数量</div></div>
        </div>
        <div class="row editFormItem">
            <div class="col-xs-3"><button class="btn btn-primary addInputBtn" type="submit" id="formSubmit">更新</button></div>
            <div class="col-xs-8"></div>
        </div>
        </form>
    </div>
@stop
@section('js')
    <script>
        (function () {
            var formArr = $('#formArr');

            $('#addText').on('click',function () {
                formArr.append('<div class="row">' +
                        '<div class="col-xs-2">文本<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="text"></div>' +
                        '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入名称" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']"></div></div>' +
                        '<div class="col-xs-6"><input type="text" placeholder="请输入默认提示信息" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]"></div>');
            });
            $('#addTitle').on('click',function () {
                formArr.append('<div class="row">' +
                    '<div class="col-xs-2">分段标题<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="title"></div>' +
                    '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入标题" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']"></div></div>' +
                    '<div class="col-xs-6"><input type="text" style="display: none" placeholder="请输入默认提示信息" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]"></div>');
            });
            $('#addArea').on('click',function () {
                formArr.append('<div class="row">' +
                        '<div class="col-xs-2">文本框<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="textarea"></div>' +
                        '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入名称" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']"></div></div>' +
                        '<div class="col-xs-6"><input type="text" placeholder="请输入默认提示信息" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]"></div>');
            });
            $('#addTime').on('click',function () {
                formArr.append('<div class="row">' +
                    '<div class="col-xs-2">日期<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="time"></div>' +
                    '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入名称" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']"></div></div>' +
                    '<div class="col-xs-6"><input type="text" style="display: none" placeholder="请输入默认提示信息" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]"></div>');
            });
            $('#addMin').on('click',function () {
                formArr.append('<div class="row">' +
                    '<div class="col-xs-2">时间<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="min"></div>' +
                    '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入名称" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']"></div></div>' +
                    '<div class="col-xs-6"><input type="text" style="display: none" placeholder="请输入默认提示信息" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]"></div>');
            });
            $('#addSelect').on('click',function () {
                formArr.append('<div class="row">' +
                        '<div class="col-xs-2">选项<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="picker"></div>' +
                        '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入名称" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']"></div></div>' +
                        '<div class="col-xs-6"><input type="text" placeholder="请输入选项值以空格间隔" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]"></div>');
            });
            $('#addPhone').on('click',function () {
                formArr.append('<div class="row">' +
                        '<div class="col-xs-2">手机验证<input type="text" style="display: none" name="FormItem[item_'+($('#formArr .row').length-1)+'_t]" value="phone"></div>' +
                        '<div class="col-xs-4"><div id="FormItem_'+($('#formArr .row').length-1)+'_box"><input placeholder="请输入名称" type="text" id="FormItem_'+($('#formArr .row').length-1)+'" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+']" value="手机号"></div></div>' +
                        '<div class="col-xs-6"><input type="text" placeholder="请输入默认提示信息" class="form-control" name="FormItem[item_'+($('#formArr .row').length-1)+'_p]" value="请输入您的手机号"></div>');
            });
            $('#delInput').on('click',function () {
                if($('#formArr .row').length>1){
                    $('#formArr .row')[$('#formArr .row').length-1].remove();
                }else{
                    alert('无可删除选项')
                }
            });

            $('#formSubmit').on('click',function (e) {
                var sub = 0;
                if(!$('#formName').val().replace(/(^\s*)|(\s*$)/g, "")){
                    $('#formNameBox').addClass('has-error');
                    sub = 1;
                }
                var formArrInput = $('#formArr .row');
                for(var i=0;i<formArrInput.length;i++){
                    if(!$('#FormItem_'+i).val().replace(/(^\s*)|(\s*$)/g, "")){
                        $('#FormItem_'+i+'_box').addClass('has-error');
                        sub = 1;
                    }
                }
                if(sub){
                    e.preventDefault();
                }
            })
        })();
    </script>
@stop